<template>
	<view class="btn" :class="[`btn-${props.type}`, `btn-${size}`, { 'btn-round': props.round }]" @click="handleClik">
		<slot />
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	const emits = defineEmits(["click"])
	const handleClik = () => {
		emits("click")
	}
	const props = defineProps({
		type: {
			type: String,
			default: 'default'
		},
		size: {
			type: String,
			default: 'medium'
		},
		round: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss">
	.btn {
		display: inline-block;

		&-default {
			color: $btn-default-color;
			background: $btn-default-background;
			border: 1rpx solid $btn-default-border-color;
		}

		&-primary {
			color: $btn-primary-color;
			background: $btn-primary-background;
			border: 1rpx solid $btn-primary-border-color;
		}

		&-large {
			padding: 22rpx 48rpx;
			border-radius: 15rpx;
			font-size: 28rpx;
			border-width: 2rpx;
		}

		&-medium {
			padding: 16rpx 26rpx;
			border-radius: 12rpx;
			font-size: 26rpx;
		}

		&-mini {
			padding: 12rpx 21rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
		}

		&-round {
			border-radius: 80rpx;
		}
	}
</style>